<template>
  <div class="q-collapse-box">
    <a-collapse defaultActiveKey="1">
      <a-collapse-panel key="1" header="事件详情">
        <div style="padding:0 10px;" v-if="!isDraw">
          <a-row style="margin-bottom:10px;" v-if="locationValue != ''">
            <a-col :span="24">
              <span> {{ locationValue }} </span>
            </a-col>
          </a-row>
          <a-row style="margin-bottom:10px;">
            <a-col :span="24">
              <span>{{ radius }}m</span> <a-divider type="vertical" /><span>{{ address }}</span>
            </a-col>
          </a-row>
          <a-row style="margin-bottom:10px;">
            <a-col :span="24">
              经度：<span>{{ longitude }}</span> <a-divider type="vertical" />纬度：<span>{{ latitude }}</span>
            </a-col>
          </a-row>
        </div>
        <a-tabs default-active-key="1" v-model="tabIndex" @change="onChange">
          <a-tab-pane key="1" tab="周边事件">
            <a-select
              placeholder="请选择"
              v-model="eventSelect"
              @change="onEventChange"
              style="width:30%;margin:0 0 10px 10px;"
            >
              <a-select-option value="1">告警事件</a-select-option>
              <a-select-option value="2">告警人员</a-select-option>
            </a-select>
            <InfoList1 ref="infoListID1" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="视频监控" force-render>
            <InfoList2 ref="infoListID2" />
          </a-tab-pane>
          <a-tab-pane key="3" tab="应急物资" force-render>
            <InfoList3 ref="infoListID3" />
          </a-tab-pane>
          <a-tab-pane key="4" tab="组织" force-render>
            <a-select
              placeholder="请选择"
              v-model="orgSelect"
              @change="onOrgChange"
              style="width:30%;margin:0 0 10px 10px;"
            >
              <a-select-option value="1">群防群治</a-select-option>
              <a-select-option value="2"> 综治机构</a-select-option>
              <a-select-option value="3"> 综治中心</a-select-option>
            </a-select>
            <InfoList4 ref="infoListID4" />
          </a-tab-pane>
        </a-tabs>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import InfoList1 from './infoList1'
import InfoList2 from './infoList2'
import InfoList3 from './infoList3'
import InfoList4 from './infoList4'
export default {
  components: {
    CustomTable,
    InfoList1,
    InfoList2,
    InfoList3,
    InfoList4
  },
  data() {
    return {
      params: {},
      tabIndex: '1',
      locationValue: '',
      longitude: '',
      latitude: '',
      radius: '',
      address: '',
      isDraw: false,
      eventSelect: '1',
      orgSelect: '1'
    }
  },
  mounted() {},
  methods: {
    getData(params, isDraw) {
      this.isDraw = isDraw // 框选区域查询，没有具体位置信息，隐藏掉
      this.tabIndex = '1'
      this.locationValue = params.locationValue
      this.longitude = params.selectionVos[0].longitude
      this.latitude = params.selectionVos[0].latitude
      this.radius = params.selectionVos[0].radius
      this.address = params.selectionVos[0].address
      this.params = params
      this.$refs.infoListID1.getData(params, this.eventSelect) // 默认告警事件
    },
    onEventChange(val) {
      this.$refs.infoListID1.getData(this.params, val) // 默认告警事件
    },
    onOrgChange(val) {
      this.$refs.infoListID4.getData(this.params, val) // 默认告警事件
    },
    // tabs切换
    onChange(e) {
      if (e === '1') {
        this.$refs.infoListID1.getData(this.params, this.eventSelect)
      }
      if (e === '2') {
        this.$refs.infoListID2.getData(this.params)
      }
      if (e === '3') {
        this.$refs.infoListID3.getData(this.params)
      }
      if (e === '4') {
        this.$refs.infoListID4.getData(this.params, this.orgSelect)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.q-collapse-box {
  position: absolute;
  right: 0;
  top: 60px;
  width: 460px;
  height: 100%;
  // height: 800px;
  // background-color: #fff;
  .topBox {
    background-color: #f2f2f2 !important;
    overflow: hidden;
    p {
      float: left;
      color: #000;
      padding: 15px 10px 0;
      font-weight: 500;
      font-size: 16px;
      // line-height: 22px;
    }
    /deep/.anticon {
      float: right;
      margin: 10px;
    }
  }
  .pc {
    text-align: center;
  }
}
/deep/.ant-card {
  padding: 5px 17px;
  margin-bottom: 10px;
}
/deep/.ant-tabs-nav .ant-tabs-tab {
  padding-top: 5px;
}
/deep/.ant-tabs-bar {
  margin-bottom: 10px;
}
/deep/.ant-table-tbody > tr > td {
  border-bottom: none;
}
</style>
